<template>
    <div class="content">
        <div v-show="weChart == 1" class="layout">
            <div class="pre">
                <div class="pre_title">
                    <span class="title-text">浏览时间段</span>
                    <!-- <span class="export" @click="export2Img(myRef_one, '浏览时间段')">导出</span> -->
                    <el-button @click="export2Img(myRef_one, '浏览时间段')">导出</el-button>
                </div>
                <div v-show="!isNoMessage1" id="echarts" ref="myRef_one" class="min"></div>
                <div v-show="isNoMessage1" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
            <div class="pre">
                <div class="pre_title">
                    <span class="title-text">客户标签</span>
                    <!-- <span class="export" @click="export2Img(myRef_two, '客户标签')">导出</span> -->
                    <el-button @click="export2Img(myRef_two, '客户标签')">导出</el-button>
                </div>
                <div v-show="!isNoMessage2" id="echarts" ref="myRef_two" class="min"></div>
                <div v-show="isNoMessage2" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
        </div>
        <div v-show="weChart != 1" class="layout">
            <div class="pre">
                <div class="pre_title">
                    <span class="title-text">点赞时间段</span>
                    <!-- <span class="export" @click="export2Img(myRef_three, '点赞时间段')">导出</span> -->
                    <el-button @click="export2Img(myRef_three, '点赞时间段')">导出</el-button>
                </div>
                <div v-show="!isNoMessage3" id="echarts" ref="myRef_three" class="min"></div>
                <div v-show="isNoMessage3" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
            <div class="pre">
                <div class="pre_title">
                    <span class="title-text">评论时间段</span>
                    <el-button v-auth="'LIKE_PERIOD_EXPORT'" @click="export2Img(myRef_four, '评论时间段')">
                        导出
                    </el-button>
                </div>
                <div v-show="!isNoMessage4" id="echarts" ref="myRef_four" class="min"></div>
                <div v-show="isNoMessage4" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
            <div class="pre">
                <div class="pre_title">
                    <span class="title-text">客户标签</span>
                    <!-- <el-button  @click="handleExport(myRef_five)">导出</el-button> -->
                    <el-button v-auth="'COMMENT_PERIOD_EXPORT'" @click="export2Img(myRef_five, '客户标签')">
                        导出
                    </el-button>
                </div>
                <div v-show="!isNoMessage5" id="echarts" ref="myRef_five" class="min"></div>
                <div v-show="isNoMessage5" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, inject, onMounted, nextTick, computed, watch } from 'vue';
import { export2Img, SFormat } from '@/utils/utils';
const echarts = inject('ec');
const myRef_one = ref(null);
const myRef_two = ref(null);
const myRef_three = ref(null);
const myRef_four = ref(null);
const myRef_five = ref(null);
const isNoMessage1 = ref(false);
const isNoMessage2 = ref(false);
const isNoMessage3 = ref(false);
const isNoMessage4 = ref(false);
const isNoMessage5 = ref(false);
const props = defineProps(['browseData', 'tagData', 'weChart', 'thumbsData', 'commentData', 'monmentTagData']);
//标签占比
const getEcharts = (data: any) => {
    if (data.length == 0) {
        isNoMessage2.value = true;
        return;
    } else {
        isNoMessage2.value = false;
    }
    const myChart_two = echarts.init(myRef_two.value);
    myChart_two.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '客户标签',
                type: 'pie',
                radius: '50%',
                data: data,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const echartsData = data;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = echartsData.length; i < l; i++) {
                                    total += Number(echartsData[i].value);
                                    if (echartsData[i].name == val.name) {
                                        tarValue = echartsData[i].value;
                                    }
                                }
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#DF2E6B', '#29A9F5', '#2396F2', '#3F51B5', '#673AB8', '#9C28B1']
            }
        ]
    });
    nextTick(() => {
        myChart_two.resize();
    });
    window.onresize = function () {
        myChart_two.resize();
    };
};
const getEcharts2 = (data: any) => {
    if (data.length == 0) {
        isNoMessage1.value = true;
        return;
    } else {
        isNoMessage1.value = false;
    }
    const myChart_one = echarts.init(myRef_one.value);
    myChart_one.setOption({
        tooltip: {
            trigger: 'item',
            formatter: function (a: any) {
                return `${a.name}：${SFormat(a.data.value)}`;
            }
        },
        series: [
            {
                name: '浏览时间段',
                type: 'pie',
                data: data,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const echartsData = data;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = echartsData.length; i < l; i++) {
                                    total += Number(echartsData[i].value);
                                    if (echartsData[i].name == val.name) {
                                        tarValue = echartsData[i].value;
                                    }
                                }
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#ff0000', '#ff8364', '#ffb988', '#fde860', '#ffbe49', '#b50000'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
const getEcharts3 = (data: any) => {
    if (data.length == 0) {
        isNoMessage3.value = true;
        return;
    } else {
        isNoMessage3.value = false;
    }
    const myChart_three = echarts.init(myRef_three.value);
    myChart_three.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '点赞时间段',
                type: 'pie',
                data: data,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const echartsData = data;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = echartsData.length; i < l; i++) {
                                    total += Number(echartsData[i].value);
                                    if (echartsData[i].name == val.name) {
                                        tarValue = echartsData[i].value;
                                    }
                                }
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#B50000', '#FF0000', '#FF8364', '#FFB988', '#FDE860', '#FFBE49'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_three.resize();
    });
    window.onresize = function () {
        myChart_three.resize();
    };
};
const getEcharts4 = (data: any) => {
    if (data.length == 0) {
        isNoMessage4.value = true;
        return;
    } else {
        isNoMessage4.value = false;
    }
    const myChart_four = echarts.init(myRef_four.value);
    myChart_four.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '评论时间段',
                type: 'pie',
                radius: '50%',
                data: data,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const echartsData = data;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = echartsData.length; i < l; i++) {
                                    total += Number(echartsData[i].value);
                                    if (echartsData[i].name == val.name) {
                                        tarValue = echartsData[i].value;
                                    }
                                }
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#DF2E6B', '#29A9F5', '#2396F2', '#3F51B5', '#673AB8', '#9C28B1']
            }
        ]
    });
    nextTick(() => {
        myChart_four.resize();
    });
    window.onresize = function () {
        myChart_four.resize();
    };
};
const getEcharts5 = (data: any) => {
    if (data.length == 0) {
        isNoMessage5.value = true;
        return;
    } else {
        isNoMessage5.value = false;
    }
    const myChart_five = echarts.init(myRef_five.value);
    myChart_five.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '客户标签',
                type: 'pie',
                data: data,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val: any) {
                                const echartsData = data;
                                let total = 0;
                                let tarValue = 0;
                                for (let i = 0, l = echartsData.length; i < l; i++) {
                                    total += Number(echartsData[i].value);
                                    if (echartsData[i].name == val.name) {
                                        tarValue = echartsData[i].value;
                                    }
                                }
                            }
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#4cb050', '#259888', '#fcc108', '#feeb3c', '#cddc39', '#8bc24a'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_five.resize();
    });
    window.onresize = function () {
        myChart_five.resize();
    };
};
//素材标签占比
watch(
    () => props.tagData,
    val => {
        getEcharts(val);
    }
);
//素材浏览时段占比
watch(
    () => props.browseData,
    val => {
        getEcharts2(val);
    }
);
//点赞时间段占比
watch(
    () => props.thumbsData,
    val => {
        getEcharts3(val);
    }
);
//评论时间段占比
watch(
    () => props.commentData,
    val => {
        getEcharts4(val);
    }
);
//朋友圈客户标签占比
watch(
    () => props.monmentTagData,
    val => {
        getEcharts5(val);
    }
);
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;

    .layout {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 16px;

        .pre {
            height: 546px;
            box-sizing: border-box;
            background: #fff;
            border: 1px solid #eaeaea;

            &_title {
                padding: 8px 20px;
                border-bottom: 1px solid #eaeaea;
                margin: 0 auto;
                font-size: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                z-index: 9999;

                .export {
                    display: inline-block;
                    width: 64px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    background: #fff;
                    border-radius: 4px;
                    border: 1px solid #eaeaea;
                    cursor: pointer;
                }
            }

            .min {
                width: 100%;
                height: 400px;
            }
        }

        .no_data {
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .no_img {
                margin-left: 24px;
            }

            .no_title {
                color: #909399;
                font-size: 14px;
            }
        }
    }
}
</style>
